<template>
  <default-layout>
    <header-close text="我的预约" slot="header"></header-close>
    <div slot="main">
      <div class="form-list">
        <div class="form-list-item">
          <div class="label">姓名：</div>
          <div class="content">{{book.aac003}}</div>
        </div>
        <div class="form-list-item">
          <div class="label">身份证号：</div>
          <div class="content">{{book.aac002}}</div>
        </div>
        <div class="form-list-item">
          <div class="label">预约内容：</div>
          <div class="content">{{book.materialName}}</div>
        </div>
        <div class="form-list-item">
          <div class="label">状态：</div>
          <div class="content">{{book.auditStatusName}}</div>
        </div>
      </div>
      <div class="file-list form-list" v-if="fileList.length">
        <div class="tit">附件列表</div>
        <loading-text v-if="loading"></loading-text>
        <empty tip="无数据~" v-if="!loading && !fileList.length"></empty>
        <yd-lightbox :num="fileList.length">
          <div class="form-list-item" v-for="(val, key) in fileList" :key="key">
            <div class="label">{{val.fileName}}</div>
            <div class="content">
              <yd-lightbox-img :src="$getImg(val.filePath)"></yd-lightbox-img>
            </div>
          </div>
        </yd-lightbox>
      </div>
      <div class="file-list form-list" v-if="downloadFiles.length">
        <div class="tit">附件列表</div>
        <div class="form-list-item" v-for="(val, key) in downloadFiles" :key="key">
          <div class="label">{{val.fileName}}</div>
          <div class="content">
            <mt-button type="primary" size="small" @click="download(val.filePath)">点击下载附件</mt-button>
          </div>
        </div>
      </div>
      <!--<div class="list">
        <div class="item">
          <div class="left"></div>
          <div class="right">
            <div class="tit">管理员审核通过</div>
            <div class="desc">请携带材料至窗口办理业务</div>
            <div class="date">2018-12-07</div>
            <div class="event">
              <mt-button type="primary" size="small">点击查看所需材料</mt-button>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="left"></div>
          <div class="right">
            <div class="tit">管理员审核通过</div>
            <div class="desc">请携带材料至窗口办理业务</div>
            <div class="date">2018-12-07</div>
            <div class="event">
              <mt-button type="primary" size="small">点击查看所需材料</mt-button>
            </div>
          </div>
        </div>
      </div>-->
    </div>
    <mt-button size="large" type="primary" @click="cancel" v-if="Number(book.auditStatus) === 0">撤销申请</mt-button>
  </default-layout>
</template>
<script>
  import HeaderClose from '../../../components/header-close/header-close.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {mapGetters} from 'vuex'
  import Empty from '../../../components/empty/empty'
  import LoadingText from '../../../components/loading-text/loading-text'
  import {download} from '../../../common/js/util'

  export default {
    components: {LoadingText, Empty, DefaultLayout, HeaderClose},
    name: 'my-book-detail',
    computed: {
      ...mapGetters([
        'book'
      ])
    },
    data() {
      return {
        fileList: [],
        downloadFiles: [],
        loading: false
      }
    },
    methods: {
      getFiles() {
        this.$post('/admin/person/sapi/sys/file/upload/callback/list', {
          dataId: this.book.id,
          fileModule: 'com.xunfeng.business.personagency.preaudit.model.MaterialPreaudit'
        }, loading => { this.loading = loading }).then(res => {
          this.fileList = res.data.dataList
        })
      },
      cancel() {
        this.$message.confirm('确定撤销本次申请？').then(() => {
          // 撤销预约
          this.$post('/sapi/preaudit/materialPreaudit/delete', {
            id: this.book.id
          }).then(res => {
            this.$message.alert(res.message).then(() => {
              this.$emit('refresh')
              this.$router.back()
            })
          })
        })
      },
      // 开具证明下载url
      getDownloadUrl() {
        if (String(this.$route.query.busiType) === '8') {
          this.$post('/admin/person/sapi/personal/records/issue/proof/pdf/path/get', {
            dataId: this.$route.query.id,
            fileModule: 6
          }).then(res => {
            this.downloadFiles = res.data.dataList
          })
        }
      },
      // 下载附件（开具证明）（pdf）
      download(url) {
        download(this.$getImg(url, {type: 'pdf'}))
      }
    },
    created() {
      if (!this.book) {
        this.$router.replace({name: 'home'})
      }
      this.getFiles()
      this.getDownloadUrl()
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .list{
    background: #fff;
    margin: .15rem 0 0 0;
  }
  .item{
    display: flex;
    align-items: flex-start;
    padding: .2rem 0 0 .2rem;
    .left{
      width: .4rem;
      height: .4rem;
      border-radius: 50%;
      border: 4px solid #d9d9d9;
    }
    .right{
      flex: 1;
      padding: 0 .2rem .2rem .2rem;
      border-bottom: 1px solid #ededed;
      .tit{
        font-size: .33rem;
        color: #000;
      }
      .desc{
        font-size: .3rem;
        color: #333;
      }
      .date{
        font-size: .28rem;
        color: #666;
      }
      & > div{
        padding: 0 0 .1rem 0;
      }
    }
    &:last-child{
      .left{
        border-color: $primary;
      }
    }
  }
  .file-list{
    margin: .2rem 0 0 0;
    .tit{
      padding: .2rem 0;
      text-align: center;
      font-size: .3rem;
    }
    .label{
      width: 2rem;
      word-break: break-all;
      white-space: normal;
    }
    img{
      width: 2.5rem;
    }
    .form-list-item{
      align-items: center;
    }
  }
</style>
